﻿<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<link href="weixin/css/layer.css" rel="stylesheet" />
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<link href="css/font-awesome.min.css" rel="stylesheet" />
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/plugins/layer/layer.min.js"></script>
<script src="js/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
<script src="weixin/js/common.js"></script>
<script src="js/tableToExcel.js"></script>
<style>
    #report {
        font-size: 15px;
        height: auto;
        width: auto;
        text-align: center;
        margin-top:5px
    }
    #report th {
        background-color: darkgrey;
        text-align: center !important;
        min-width: 100px
    }
    .gray {
        background-color: lightgray;
    }
    .red {
        font-weight: bold;
        color: red;
        background-color: wheat;
    }
    .black {
        color: black;
        font-weight: bold;
        background-color: wheat;
    }
</style>
<html>
<head>
    <title>时段销售分析报表</title>
</head>
<body>
<div style="margin-top:5px;margin-left:5px">
    <div>
        <label>时间一:</label>&nbsp&nbsp
        <input id="endDate1" type="text" placeholder="请选择结束时间一" readonly="readonly" />
        <label>时间二:</label>&nbsp&nbsp
        <input id="endDate2" class="input-date" type="text" placeholder="请选择结束时间二" readonly="readonly" />
        <label>时间三:</label>&nbsp&nbsp
        <input id="endDate3" class="input-date" type="text" placeholder="请选择结束时间三" readonly="readonly" />
        &nbsp&nbsp<input name="level" type="radio" value="0" checked="checked" />分部
        <input name="level" type="radio" value="1"/>店铺&nbsp&nbsp
        <a class="btn btn-success btn-xs btn-lg">查询</a>&nbsp&nbsp
        <a class='btn btn-success btn-xs btn-info' onclick='tableToExcelMethod(report)'>导出</a>
    </div>
    <table border="1" id="report" data-excelTitle="元旦播报">
        <thead id="title">
        <%--<tr >
            <th>项目</th>
            <th>日期</th>
            <th>星期</th>
            <th>零售1部</th>
            <th>零售2部</th>
            <th>零售3部</th>
            <th>零售4部</th>
            <th>零售5部</th>
            <th>零售6部</th>
            <th>零售7部</th>
            <th>零售8部</th>
            <th>零售9部</th>
            <th>零售10部</th>
            <th>总计</th>
        </tr>--%>
        </thead>
        <tbody id="body">
        </tbody>
    </table>
</div>
</body>
</html>
<script type="text/javascript">
    $(function () {
        $('#endDate1').datetimepicker({
            format: "yyyy-mm-dd hh:00",
            autoclose: true,
            minView:1
        });
        $('.input-date').datetimepicker({
            format: "yyyy-mm-dd",
            autoclose: true,
            minView: 2
        });
        var date1 = new Date();
        var date2 = new Date();
        var date3 = new Date();
        date2.setDate(date1.getDate() - 1);
        date3.setDate(date1.getDate() - 7);
        var month1 = date1.getMonth() < 9 ? ("0" + (date1.getMonth() + 1)) : (date1.getMonth() + 1);
        var month2 = date2.getMonth() < 9 ? ("0" + (date2.getMonth() + 1)) : (date2.getMonth() + 1);
        var month3 = date3.getMonth() < 9 ? ("0" + (date3.getMonth() + 1)) : (date3.getMonth() + 1);
        $("#endDate1").val(date1.getFullYear() + "-" + month1 + "-" + (date1.getDate() < 10 ? ("0" + date1.getDate()) : date1.getDate()) + " " + date1.getHours() + ":00");
        $("#endDate2").val(date2.getFullYear() + "-" + month2 + "-" + (date2.getDate() < 10 ? ("0" + date2.getDate()) : date2.getDate()));
        $("#endDate3").val(date3.getFullYear() + "-" + month3 + "-" + (date3.getDate() < 10 ? ("0" + date3.getDate()) : date3.getDate()));
        var loadData = function () {
            var s = layer.load(0, {
                shade: [0.2, '#fff'] //0.1透明度的白色背景
            });
            var level = $('input:radio[name="level"]:checked').val();
            $.post("weixin/WXActivity/PostHandler.ashx",
                {
                    "action": "KMSalesYearOnYearReport",
                    "EndDate1": $("#endDate1").val(),
                    "EndDate2": $("#endDate2").val(),
                    "EndDate3": $("#endDate3").val(),
                    "Level": level
                },
                function (data) {
                    if (data.Success == true) {
                        var title = $("#title");
                        var tbody = $("#body");
                        tbody.empty();
                        title.empty();
                        if (data.Data.length > 1) {

                            var title_html = "<tr>";
                            title_html += "<th rowspan='2'>分部</th>";
                            title_html += "<th>" + data.Data[0].SaleDate1+"</th>";
                            title_html += "<th colspan='2'>" + data.Data[0].SaleDate2+"</th>";
                            title_html += "<th colspan='2'>" + data.Data[0].SaleDate3 + "</th>";
                            title_html += "</tr>";

                            title_html += "<tr>";
                            title_html += "<th>销售</th>";
                            title_html += "<th>销售</th>";
                            title_html += "<th>同比</th>";
                            title_html += "<th>销售</th>";
                            title_html += "<th>同比</th>";
                            title_html += "</tr>";

                            title.append(title_html);
                            
                            var html = "";
                            var length = data.Data.length;
                            data.Data.map(function (item, index) {
                                var itemHtml = "<tr" + ((index % 2 == 0 || index == length - 1) ? (index == length - 1 ? " class='red' " :" ") :  " class='gray' ") + ">";
                                itemHtml += "<td>" + item.OperationAreaOrShopName + "</td>";
                                itemHtml += "<td>" + (Y.checkNull(item.SaleAmount1) ? ' ' : item.SaleAmount1.toFixed(2)) + "</td>";
                                itemHtml += "<td>" + (Y.checkNull(item.SaleAmount2) ? ' ' : item.SaleAmount2.toFixed(2))+ "</td>";
                                itemHtml += "<td>" + (Y.checkNull(item.Compared2) ? '0.00' : item.Compared2.toFixed(2)) + "%</td>";
                                itemHtml += "<td>" + (Y.checkNull(item.SaleAmount3) ? ' ' : item.SaleAmount3.toFixed(2)) + "</td>";
                                itemHtml += "<td>" + (Y.checkNull(item.Compared3) ? '0.00' : item.Compared3.toFixed(2)) + "%</td>";
                                itemHtml += "</tr>";
                                html += itemHtml;
                            });
                            tbody.append(html);
                        } else {
                            var emptyTable = "<tr><td colspan='6'>暂无数据</td></tr>";
                            tbody.append(emptyTable);
                        }
                    }
                    layer.close(s);
                });
        }
        $(".btn-success").on("click", function () {
            var endDate1 = $("#endDate1").val();
            var endDate2 = $("#endDate2").val();
            var endDate3 = $("#endDate3").val();
            if (Y.checkNull(endDate1) || Y.checkNull(endDate2) || Y.checkNull(endDate3)) {
                alert("请选择日期!");
                return false;
            }
            if (endDate1.substring(0, 10) == endDate2 || endDate1.substring(0, 10) == endDate3) {
                alert("请选择三个不同的日期!");
                return false;
            }
            loadData();
        });
    });
</script>

